import echarts from 'echarts'
import '../../../public/static/theme/chalk'

// 初始化图表
export const setEchartOptions = (ref, options) => {
  echarts.init(ref, 'chalk').setOption(options)
}

export const setEcharts = (ref, seriesData = {}) => {
  const center = [
    ['18%', '40%'],
    ['50%', '40%'],
    ['82%', '40%'],
    ['34%', '75%'],
    ['66%', '75%']
  ]
  const colorArr = [
    ['#4FF778', '#0BA82C'],
    ['#E5DD45', '#E8B11C'],
    ['#E8821C', '#E55445'],
    ['#5052EE', '#AB6EE5'],
    ['#23E5E5', '#2E72BF']
  ]
  const series = []
  seriesData.map((item, index) => {
    const pie = {
      type: 'pie',
      radius: [100, 85],
      hoverAnimation: false,
      center: center[index],
      data: [
        {
          name: item.name + '\n\n' + item.sales,
          value: item.sales,
          itemStyle: {
            color: echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0,
                color: colorArr[index][0]
              },
              {
                offset: 1,
                color: colorArr[index][1]
              }
            ])
          }
        },
        {
          value: item.stock,
          itemStyle: {
            color: '#333'
          }
        }
      ],
      label: {
        show: true,
        position: 'center'
      }
    }
    series.push(pie)
  })

  setEchartOptions(ref, {
    title: {
      show: true,
      text: '▍库存和销量分析',
      textStyle: {
        color: 'white',
        fontSize: 30,
        fontWeight: 500
      },
      top: '10%',
      left: '8%'
    },
    grid: {
      top: '20%',
      left: '10%',
      bottom: '15%'
    },
    series: series
  })
}
